<!DOCTYPE html>
<html>
  <head>
    <% include global/meta.html %>
    <% include global/top-css.html %>
    <title>yuscms</title>
</head>
  <body>

        <main class="main" data-info="<%=admin.permission%>">
			<div class="ys-admin-pos c-a1a3aa">
                首页<span class="f-sum">></span>
                <span class="c-565b6d">会员管理</span>
                <span class="f-sum">></span>
                <span class="c-565b6d">新增</span>
              </div>
          
              <div class="ys-admin-tablist">
                  <div class="ys-admin-tab-header row justify-content-b">
                      <p class="f-14 c-565b6d pl-8 pt-6"></p>
                  </div>
          
                  <div class="mr-10 ml-10">
                      <form @submit.prevent="checkForm" name="form">
                      <ul>
                                          
                          <li class="row pd-10 f-14">
                              <div class="col-hd">
                                  <label class="label">用&nbsp; 户&nbsp; 名</label>
                              </div>
                              
                              <div class="col-8">
                                  <input type="text" name="user" class="input" placeholder="用户名2-20位之间[必填]" v-model="params.user" />
                              </div>
                          </li>
                              
                          <li class="row pd-10 f-14">
                              <div class="col-hd">
                                  <label class="label">密　　码</label>
                              </div>
                              <div class="col-8">
                                  <input type="password" name="pass" placeholder="密码不能小于6位" class="input" v-model="params.pass" />
                              </div>
                          </li>
                          <li class="row pd-10 f-14">
                              <div class="col-hd">
                                  <label class="label">密码确认</label>
                              </div>
                              <div class="col-8">
                                  <input type="password" name="repass" placeholder="密码确认和密码保持一致" class="input" v-model="params.repass" />
                              </div>
                          </li>
                          <li class="row pd-10 f-14">
                              <div class="col-hd">
                                  <label class="label">电子邮件</label>
                              </div>
                              <div class="col-8">
                                  <input type="email" name="email" placeholder="每个邮箱只能注册一次" class="input" v-model="params.email" />
                              </div>
                          </li>
                          <li class="row pd-10 f-14">
                              <div class="col-hd">
                                  <label class="label">手机号码</label>
                              </div>
                              <div class="col-8">
                                  <input type="tel" name="tel" placeholder="请正确填写手机号码" class="input" v-model="params.tel" />
                              </div>
                          </li>
                          <li class="row pd-10 f-14">
                              <div class="col-hd">
                                  <label class="label">剩余水量</label>
                              </div>
                              <div class="col-8">
                                  <input type="number" name="water" placeholder="" class="input" v-model="params.water" />
                              </div>
                              <div class="col-ft">
                                  <span class="ml-10 mt-5 c-565b6d">桶水</span>
                              </div>
                          </li>
                          <li class="row pd-10 f-14">
                                  <div class="col-hd">
                                      <label class="label">设置权限</label>
                                  </div>
                                  <div class="col-bd">
                                      <input type="radio" name="state" class="radio pos-r t-4 mr-5" v-model="params.state" value="0" />
                                      <span class="c-565b6d f-14 mr-15">拉黑会员</span>
                                      <input type="radio" name="state" class="radio pos-r t-4 mr-5" v-model="params.state" checked="checked"  value="1" />
                                      <span class="c-565b6d f-14 mr-15">初级会员</span>
                                      <input type="radio" name="state" class="radio pos-r t-4 mr-5" v-model="params.state" value="2" />
                                      <span class="c-565b6d f-14 mr-15">中级会员</span>
                                      <input type="radio" name="state" class="radio pos-r t-4 mr-5" v-model="params.state" value="3" />
                                      <span class="c-565b6d f-14 mr-15">高级会员</span>
                                      <input type="radio" name="state"  class="radio pos-r t-4 mr-5" v-model="params.state" value="4" />
                                      <span class="c-565b6d f-14 mr-15">vip会员</span>
                                  </div>
                              </li>
          
                              <li class="pd-10 mt-35">
                              <div class="col-hd">
                              &nbsp;&nbsp;&nbsp;&nbsp;
                              </div>
                              <div class="col-bd row ml-35">
                              <input name="send" class="btn btn-sure ml-35" type="submit" value="确定发布"/>
                              <input name="send" class="btn btn-reset ml-35" type="reset" value="重置"/>
                              </div>
                          </li>
              
                      </ul>
                   </form>
                  </div>
              </div>
        </main>
    
	<% include global/all-js.html %>
	<script>
		var vm = new Vue({
			el:'.main',
			data:{
                level: [],
                params: {
                    user: "",
                    pass: "",
                    repass: "",
                    email: "",
                    tel: "",
                    water: "0",
                    state: "1"
                }
			},
			methods:{
			
                userAdd() {
      let _this = this;
      axios
        .post("/api/admin/user/add", _this.params)
        .then(data => {
          let filterData = data.data;
          if (filterData.success && filterData.data.affectedRows === 1) {
            tips(_this, "添加成功！");
            _this.$router.go(-1);
          } else {
            tipsWarn(_this, filterData.msg);
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
    checkForm: function() {
      var _this = this;
      if (!hasPermission("7")) {
        tipsWarn(_this, "对不起,您没有操作权限^_^");
        return;
      }
      var fm = document.form;

      if (_this.params.user == "" || _this.params.user.length < 2) {
        tipsWarn(_this, "用户名不得为空且不能小于两位！");
        fm.user.focus();
        return false;
      }

      if (_this.params.pass == "" || _this.params.pass.length < 6) {
        tipsWarn(_this, "密码不得为空且不能小于六位！");
        fm.pass.focus();
        return false;
      }

      if (_this.params.pass !== _this.params.repass) {
        tipsWarn(_this, "确认密码和密码不一致！");
        fm.repass.focus();
        return false;
      }

      if (_this.params.email == "") {
        tipsWarn(_this, "邮箱不能为空！");
        fm.email.focus();
        return false;
      }

      if (_this.params.tel == "") {
        tipsWarn(_this, "手机号码不能为空！");
        fm.tel.focus();
        return false;
      }

      _this.userAdd();
    }
  },

  created: function() {},
  mounted: function() {}
		});
	</script>	
	</body>
</html>
